.chatroom
	background #efefef
.search_input
	border-bottom 1px solid #ddd
	width 98%
	display block
	margin 0 auto
	vertical-align middle
	padding 5px 0
.footer
	.msg
		position: relative;
		.icon
			background #fb638a
			border-radius 50%
			size(10px,10px)
			position: absolute;
			left 55%
			top: 5px;
.setting-btn
	text-indent -99em
	background transparent url("../images/icon_setting.png") center center no-repeat
.msg-wrapper
	z-index 99
	min-height 100%
.list-msg
	height 100%
	.list-item
		.list-item-content
			padding 10px 0
			img
				width 50px
			.list-item-num
				background $c-red
				border-radius 50%
				size(24px,24px)
				position: absolute
				top: 30px
				right: 0;
.item-msg
	position relative
	padding 0 5px
	margin-top 15px
	&.owner
		.user-name,.user-logo,.user-msg,.send-time
			float right
		.user-name
			right 60px
			text-align right
		.user-msg
			position: relative;
			background: #89e252
			color #000
	.user-logo,.user-msg
		display inline-block
		margin: 0 2px
		vertical-align middle
		vertical-align -webkit-baseline-middle
	.user-name
		position absolute
		top:-22px
		left 60px
	.user-msg
		background #fff
		padding: 5px
		border-radius: 7px
		line-height 17px
		max-width 65%
		color #000
		img
			width 100%
			vertical-align bottom
	.user-logo
		size(50px,50px)
		text-align center
		color #fff
		overflow:hidden
		border-radius 50%
		background $c-blue
.keyboard-enter
	background-color #fff
	position: absolute;
	bottom: 5px
	left: 0
	width 98%
	padding 2px 1%
	.enter-input
		.icon_voice2,.icon_keyboard,.icon_more,.send-btn,.icon_emoji
			position absolute;
			top 0
		.icon_voice2,.icon_keyboard
			left 0
		.icon_more,.send-btn
			right 5px
		.icon_emoji
			right 50px
		border-radius 5px
		.textarea,.voice-input
			border 1px solid #ddd
			width 98%
			display block
			margin 0 auto
			max-height 8em
			vertical-align middle
			padding 5px 0
			resize none
			&::-webkit-scrollbar
				display: none
		.textarea
			border:none
			border-bottom 1px solid #ddd
			outline none
			padding-right 40px
			img
				vertical-align sub
	.send-btn
		border-radius: 5px;
		border 1px solid #ddd
		size(40px,30px)
		background #07a522
	.divider-list
		.divider-item
			display inline-block
			margin 5px 3.5%
			padding 2px
			width 18%
			height 55px;
			border 1px solid #999
			a
				display inline-block
.emoji-items
	span
		margin 10px 0
		display inline-block
		img
			vertical-align sub
.cross_wrapper
	width 22px
	position relative
.user-avatar
	padding 5px 0
	img
		 width 40px
		 vertical-align middle
.showMore
	&:before
		content:""
		position: absolute
		top: -10px
		width: 0;
		right 7px
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 10px solid rgba(0,0,0,0.7);
	position absolute
	top 60px
	right 15px
	padding 5px 15px
	background rgba(0,0,0,0.7)
	border-radius 3px
	z-index 999
.chat-users
	background #fff
	position: absolute
	bottom 0
	width 98%
	padding 5px 1%
	border-top 1px solid #ddd
	border-bottom 1px solid #ddd
	.scrollx
		overflow-x:scroll
		&::-webkit-scrollbar
			display: none
	.user-item
		display inline-block
	.item-avtar
		size(30px,30px)
		display block
		margin-right 5px
		float left
.list-item
	position: relative
label.list-item
	.radio[disabled]
		background-image url("../images/icon_checked.png")
.btn-delete
	border-radius 50%
	size(25px,25px)
	position: absolute
	left: 10px
	top: 22px;
	background $c-red
	display none
.showdel
	.btn-delete
		display block
		&:after
			content: "";
			width: 70%;
			display: inline-block;
			height: 4px;
			background: #fff;
			position:absolute;
			top: 50%;
			left: 15%;
			margin-top: -2px;
	.flex
		-webkit-transform:translate(30px)
.flex
	-webkit-transition: transform .25s ease;
.voice-ing
	background rgba(0,0,0,0.6)
	padding 15px 0
	size(150px,100px)
	center()
@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }
.line-scale-pulse-out > div {
  background-color: #fff;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
          animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);   
  animation-play-state:paused;
  -webkit-animation-play-state:paused;
}
  .line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
    -webkit-animation-delay: -0.4s !important;
            animation-delay: -0.4s !important; }
  .line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
    -webkit-animation-delay: -0.2s !important;
            animation-delay: -0.2s !important; }
.line-scale-pulse-out.playing > div{
	animation-play-state:running;
 -webkit-animation-play-state:running;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }
.ball-clip-rotate{
	position:absolute;
	left: -20px;
}
.ball-clip-rotate > div {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  border: 2px solid #34aff6;
  border-bottom-color: transparent;
  background-color: transparent;
  -webkit-animation: rotate 0.75s 0s linear infinite;
          animation: rotate 0.75s 0s linear infinite; }
.msg-error
	position: absolute;
	left: -8px;
	font-weight: bold;
.detail.voice
	position: relative;
	min-width 70px
	.line-scale-pulse-out
		position absolute
		right: 0;
		top: 0;
		div
			height 15px
			width 2px
			margin 2px
			background-color #34aff6
.owner
	.detail.voice
		.line-scale-pulse-out
			div
				background-color #fff
	